<!--智慧消防V1.0-admin页面-->
<template>
    <div class="bg-main">
        <div class="fireAddress" v-if="hasVideo" >火警地址：伊州区天山北路32号环球国际</div>
        <div class="fireNotice" v-if="hasNotice">{{this.noticeText}}</div>
        <el-dialog
                :visible.sync="hasVideo" :close-on-click-modal="false"
                :fullscreen="fullscreen" custom-class="videoBox">
            <div  class="videoBox">
                <div style="line-height: 30px;font-size: 22px;text-align: center">紧急情况视频系统</div>
                <div style="height: calc(60vh - 150px)">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="video-content">
                                <video ref="localVideo" width="80%" height="75%" playsinline autoplay></video>
                                <div style="line-height: 22px;font-size: 18px">消防中心</div>
                                <!--                            <div style="line-height: 22px">所在位置：测试地址</div>-->
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="video-content" >
                                <video ref="remoteVideo0" width="80%" height="75%" playsinline autoplay></video>
                                <div style="line-height: 22px;font-size: 18px">企业巡检员</div>
                                <!--                            <div style="line-height: 22px">所在位置：测试地址</div>-->
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="video-content" >
                                <video ref="remoteVideo1" width="80%" height="75%" playsinline autoplay></video>
                                <div style="line-height: 22px;font-size: 18px">企业消防员</div>
                                <!--                            <div style="line-height: 22px">所在位置：测试地址</div>-->
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="video-content" >
                                <video ref="remoteVideo2" width="80%" height="75%" playsinline autoplay></video>
                                <div style="line-height: 22px;font-size: 18px">警务站</div>
                                <!--                            <div style="line-height: 22px">所在位置：测试地址</div>-->
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="video-content" >
                                <video ref="remoteVideo3" width="80%" height="75%" playsinline autoplay></video>
                                <div style="line-height: 22px;font-size: 18px">视频通道4</div>
                                <!--                            <div style="line-height: 22px">所在位置：测试地址</div>-->
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="video-content" >
                                <video ref="remoteVideo4" width="80%" height="75%" playsinline autoplay></video>
                                <div style="line-height: 22px;font-size: 18px">视频通道5</div>
                                <!--                            <div style="line-height: 22px">所在位置：测试地址</div>-->
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="video-content" >
                                <video ref="remoteVideo5" width="80%" height="75%" playsinline autoplay></video>
                                <div style="line-height: 22px;font-size: 18px">视频通道6</div>
                                <!--                            <div style="line-height: 22px">所在位置：测试地址</div>-->
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="video-content" >
                                <video ref="remoteVideo6" width="80%" height="75%" playsinline autoplay></video>
                                <div style="line-height: 22px;font-size: 18px">视频通道7</div>
                                <!--                            <div style="line-height: 22px">所在位置：测试地址</div>-->
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <div style="text-align: left;line-height: 30px;height: 30px;display: inline-block;width: calc(100% - 200px)">火警地址：伊州区天山北路32号环球国际</div>
                    <!--                <div style="text-align: left;line-height: 30px;height: 30px;display: inline-block;width: calc(100% - 280px)">报警位置：{{location}}</div>-->
                    <div style="text-align: right;line-height: 50px;height: 50px;display: inline-block">
                        <el-popover  @show="showVideoUser" style="margin-right: 10px"
                                     placement="top"
                                     width="400"
                                     v-model="pullVideoStatus">
                            <div style="text-align: center;padding-bottom: 20px">选择视频人员</div>
                            <el-form ref="videoForm" :model="videoForm" :rules="videoFormRules">
                                <el-form-item label="视频人员" prop="userId">
                                    <el-select v-model="videoForm.userId" placeholder="请选择视频人员" style="width: 100%">
                                        <el-option v-for="(item,index) in userList" :key="index" :disabled="!item.online"  :value="item.ucId" :label="item.name" >
                                            <span style="float: left">{{ item.name }}</span>
                                            <span style="float: right">{{ item.online?'在线':'离线' }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="pullVideoStatus = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="pullVideo">拉人视频</el-button>
                            </div>
                            <el-button slot="reference" size="mini" icon="el-icon-finished" type="danger"  class="filter-item">拉人视频</el-button>
                        </el-popover>
                        <!--                    <el-button type="danger" size="mini" @click="generateFire">确认火情</el-button>-->
                        <el-button type="danger" size="mini" @click="hungUp">挂断</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
        <div class="bg-left">
            <div class="left-content">
                <div class="data-top"  @click="toEquipmentList">
                    <div class="content-box">
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">预警设备（个）</div>
                            <div style="color: #ff0300;font-size: 30px;line-height: 35px">0</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">故障设备（个）</div>
                            <div style="color: #ff8000;font-size: 30px;line-height: 35px">0</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">正常设备（个）</div>
                            <div style="color: #01fcff;font-size: 30px;line-height: 35px">{{ deviceData.deviceTotal }}</div>
                        </div>
                    </div>
                </div>
                <div class="data-bottom">
                    <div class="bottom-box-left">
                        <div @click="toEquipmentList">
                            <div class="title" ><span class="font" >设备类别</span></div>
                            <div class="equ-bottom" >
                                <dv-charts :option="deviceType" ref="deviceType" style="width:40%;display: block;float: left"/>
                                <div class="text">
                                    <div class="equ-name">
                                        <div>
                                            <div style="font-size: 14px;color: #64abd9;float: left;line-height: 33px">设备总数</div><div style="float: right;font-size: 28px;line-height: 33px">{{deviceData.deviceTotal}}</div>
                                        </div>
                                        <div>
                                            <div style="font-size: 14px;color: #37a2da;float: left;line-height: 26px">压力水表</div><div style="float: right;font-size: 22px;line-height: 26px">{{deviceData.yyTotal}}</div>
                                        </div>
                                        <div>
                                            <div style="font-size: 14px;color: #32c5e9;float: left;line-height: 26px">烟感探测器</div><div style="float: right;font-size: 22px;line-height: 26px">{{deviceData.ygTotal}}</div>
                                        </div>
                                        <div>
                                            <div style="font-size: 14px;color: #67e0e3;float: left;line-height: 26px">液位水表</div><div style="float: right;font-size: 22px;line-height: 26px">{{deviceData.ywTotal}}</div>
                                        </div>
                                        <div>
                                            <div style="font-size: 14px;color: #67e0e3;float: left;line-height: 26px">消防主机设备</div><div style="float: right;font-size: 22px;line-height: 26px">{{deviceData.zjTotal}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div  @click="toFireInfo">
                            <div class="title"><span class="font">消防主机动态报警</span></div>
                            <div style="margin-top: 5px">
                                <dv-scroll-board ref="ifireList" :config="ifireList" style="width:440px;height:calc(27vh - 81px);opacity: 0.6"  />
                            </div>
                        </div>
<!--                        <div>-->
<!--                            <div class="title"><span class="font">设备在线情况</span></div>-->
<!--                            <div id="test" ref="testChar"></div>-->
<!--                        </div>-->
<!--                        <div @click="toNonEmergency">-->
<!--                            <div class="title"><span class="font">异常情况</span></div>-->
<!--                            <div style="margin-top: 5px">-->
<!--                                <dv-scroll-board ref="nonEmergency" :config="nonEmergency" style="width:440px;height:calc(33vh - 93px);opacity: 0.6"  />-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-top">
            <!--视频系统按钮-->
            <div style="width: 460px;height: 36px;position: absolute;right: 0;top: 30px">
                <div class="video-button" @click="enterSystem"></div>
                <div class="notice-button" @click="enterNotice">
                    <el-badge :value="noticeVal" class="item">
                        <i class="el-icon-if-jingbao_d"></i>
                    </el-badge>
                </div>
            </div>
        </div>
        <div class="bg-right">
            <div class="right-content">
                <div class="data-top">
                    <div class="content-box" @click="toFireInfo">
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">真实火情（起）</div>
                            <div style="color: #ff0300;font-size: 30px;line-height: 35px">{{ realFireNum }}</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">误报火情（起）</div>
                            <div style="color: #ff8000;font-size: 30px;line-height: 35px">0</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">故障报警（起）</div>
                            <div style="color: #01fcff;font-size: 30px;line-height: 35px">0</div>
                        </div>
                    </div>
                </div>
                <div class="data-bottom">
                    <div class="bottom-box-right" style="color: #fff">
<!--                        <div>-->
<!--                            <div class="title"><span class="font">报警趋势</span></div>-->
<!--&lt;!&ndash;                            <dv-charts :option="option" />&ndash;&gt;-->
<!--                            <div id="error" ref="errorChar"></div>-->
<!--                        </div>-->
                        <div @click="toTake">
                            <div class="title"><span class="font">巡检任务完成情况</span>
                                <div style="margin-top: 5px">
                                    <dv-scroll-board ref="taskOverStatus" :config="taskOverStatus" style="width:440px;height:calc(45vh - 140px);opacity: 0.6"  />
                                </div>
                            </div>
                        </div>
                        <div @click="toNonEmergency">
                            <div class="title"><span class="font">维保情况</span></div>
                            <div style="margin-top: 5px">
                                <dv-scroll-board ref="maintance" :config="maintance" style="width:440px;height:calc(33vh - 93px);opacity: 0.6"  />
                            </div>
                        </div>
                        <div @click="toNonEmergency">
                            <div class="title"><span class="font">异常情况</span></div>
                            <div style="margin-top: 5px">
                                <dv-scroll-board ref="nonEmergency" :config="nonEmergency" style="width:440px;height:calc(33vh - 93px);opacity: 0.6"  />
                            </div>
                        </div>
<!--                        <div  @click="toFireInfo">-->
<!--                            <div class="title"><span class="font">报警记录</span></div>-->
<!--                            <div style="margin-top: 5px">-->
<!--                                <dv-scroll-board ref="ifireList" :config="ifireList" style="width:440px;height:calc(27vh - 81px);opacity: 0.6"  />-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <div style="position: absolute;z-index: 10;width: calc(100% - 10px);margin: 0 5px">
            <baidu-map class="bm-view"  :zoom="13" @ready="initMap" center="哈密市" map-type="BMAP_HYBRID_MAP" :scroll-wheel-zoom="true"></baidu-map>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import 'aliyun-webrtc-sdk'
import {
    getDeviceData,
    getEnterPriseTask,
    getFireData,
    getIFireDataPage,
    getInUserPlaceVo, getUnFinishFireInfoList,
    getUserNoReadNotice
} from "@/api/common";
import {joinChannel, pullPerson,deleteChannel} from "@/api/alirtc";
import {generateFire} from "@/api/enterprise";
import {showVideoUser} from "@/api/user";
import {getWorkOrderPage} from "@/api/workOrder";
import {getInHiddenDangerPage} from "@/api/hiddenDanger"
export default {
    name: 'DashboardAdmin',
    data() {
        return {
            fullscreen:true,
            resizeBox:false,
            nonEmergency: {
                header:['异常情况', '时间', '责任单位','整改情况'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                data:[]
            },
            maintance:{
                header:['维保情况', '整改时间', '责任单位','维保状态'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                data:[]
            },
            ifireList:{
                header:['事件', '时间', '位置'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                rowNum:4,
                data: []
            },
            taskOverStatus:{
                header:['企业名称', '电话','任务领取'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                rowNum:8,
                data: []
            },
            deviceType:{
                legend: {
                    orient: 'horizontal',
                    left:10,
                    top:'10%',
                },
                series: [
                    {
                        name: '同比',
                        type: 'pie',
                        data: [
                            { name: '压力水表', value: 334},
                            { name: '烟感探测器', value: 134},
                            { name: '液位水表', value: 183},
                        ],
                        radius: '30%',
                        outsideLabel: {
                            show: false
                        },
                        insideLabel: {
                            show: false
                        }
                    },
                    {
                        name: '环比',
                        type: 'pie',
                        data: [
                            { name: '压力水表', value: 334},
                            { name: '烟感探测器', value: 134},
                            { name: '液位水表', value: 183},
                        ],
                        radius: ['40%', '50%'],
                        outsideLabel: {
                            show: false
                        },
                        insideLabel: {
                            show: false
                        }
                    }
                ]
            },
            option:{
                title:{
                    show:false
                },
                xAxis: {
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    data: 'value'
                },
                series: [
                    {
                        data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
                        type: 'line',
                        lineArea: {
                            show: true
                        },
                        smooth: true
                    }
                ]
            },
            hasVideo:false,
            hasNotice:false,
            aliWebrtc:{},
            deviceData:{},
            noticeVal:0,
            realFireNum:0,
            remoteList:[],
            noticeText:'',
            location:"",
            pullVideoStatus:false,
            userList:[],
            videoForm:{},
            videoFormRules:{
                name: [{required: true, message: '视频人员不能为空', trigger: 'change'}],
            },
            deleteForm:{
                action:"DeleteChannel",
                channelId:'',
            },
        }
    },
    created(){
        this.initWebSocket()
        this.initNonEmergency()
        this.initTaskOverStatus()
        this.initIFireData()
        this.showVideoUser()
        this.initMaintenanceDate()
        this.getUnFinishFireInfoList()
    },
    mounted() {
      window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
      window.addEventListener('unload', e => this.unloadHandler(e))
      this.initDeviceData()
      this.initLineIFire()
    },
    methods:{
        getUserNoReadNotice() {
            getUserNoReadNotice({}).then(res => {
                console.log(res.data)
                this.noticeVal=res.data

            }).catch(res => {


            })
        },
        getUnFinishFireInfoList(){
            getUnFinishFireInfoList({}).then(res=>{
                console.log(res)
            })
        },
        resizeClick(val){
            this.resizeBox = true
            console.log(this.remoteList[val])
            this.$nextTick(() => {
                this.aliWebrtc.setDisplayRemoteVideo(this.remoteList[val].userId,this.$refs.resizeVideo,1)
            });
        },
        toEquipmentList(){
            this.$router.push("/equipment/equipment")
        },
        toNonEmergency(){
            this.$router.push("nonEmergency/hiddenDangerList")
        },
        toTake(){
            this.$router.push("/taskManage/dailyTasks")
        },
        toFireInfo(){
            this.$router.push("/fireAlarm/fireInfo")
        },
        generateFire(){
            generateFire({ucId:this.userId}).then(res => {
                this.$notify.success({
                    title: '成功',
                    message: "确认火情成功"
                })
            }).catch(res => {
                console.log(this.userId)
                console.log("失败")
            })
        },
        initMap ({BMap,map}) {

        },
        enterSystem(){
            //进入系统方法
            // location.href="https://es.ys7.com/mainframe"
            this.$router.push("/equipment/video")
        },
        enterNotice(){
            this.$router.push("/common/selfNotice")
        },
        hungUp(){
            this.leaveVideo()
            this.deleteChannel()
        },
        initNonEmergency(){
            getInHiddenDangerPage({pageSize:100}).then(res=>{
                let objList = res.data.list
                let data =[]
                objList.forEach(item=>{
                    data.push(
                        [item.name, item.addTimeStr, item.enterpriseName,item.status!=0?'<span style="color: #ff0000">未整改</span>':'<span style="color: #0bb20c">已整改</span>'],
                    )
                })
                this.$refs.nonEmergency.updateRows(data, 0);
            })
        },
        initMaintenanceDate(){
            getWorkOrderPage({pageSize:100}).then(res=>{
                let objList = res.data.list
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.name, item.feedbackTime, item.maintenanceEnterpriseName,item.status!=7?'<span style="color: #ff0000">维保中</span>':'<span style="color: #0bb20c">维保完成</span>'],
                    )
                })
                this.$refs.maintance.updateRows(data, 0);
            })
        },
        initTaskOverStatus(){
            getEnterPriseTask({deleted:false,pageSize:100}).then(res=>{
                let objList = res.data.list
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.name, item.mobile, item.taskCompletion],
                    )
                })
                this.$refs.taskOverStatus.updateRows(data, 0);
            })
        },
        initIFireData(){
            getIFireDataPage({deleted:false,pageSize:100}).then(res=>{
                let objList = res.data.list
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.name,item.fireTimeStr, item.loaction],
                    )
                })
                this.$refs.ifireList.updateRows(data, 0);
            })
        },
        initDeviceData(){
          getDeviceData({}).then(res=>{
            this.deviceData = res.data
            this.deviceType={
              legend: {
                orient: 'horizontal',
                    left:10,
                    top:'10%',
              },
              series: [
                {
                  name: '同比',
                  type: 'pie',
                  data: [
                      {name: '压力水表', value: res.data.yyTotal},
                      {name: '烟感探测器', value: res.data.ygTotal},
                      {name: '液位水表', value: res.data.ywTotal},
                      {name: '消防主机设备', value: res.data.zjTotal},
                  ],
                  radius: '30%',
                  outsideLabel: {
                    show: false
                  },
                  insideLabel: {
                    show: false
                  }
                },
                {
                  name: '环比',
                  type: 'pie',
                  data: [
                    { name: '压力水表', value: res.data.yyTotal},
                    { name: '烟感探测器', value: res.data.ygTotal},
                    { name: '液位水表', value: res.data.ywTotal},
                      { name: '消防主机设备', value: res.data.zjTotal},
                  ],
                  radius: ['20%', '70%'],
                  outsideLabel: {
                    show: false
                  },
                  insideLabel: {
                    show: false
                  }
                }
              ]
            }
            this.initDeviceBar(this.deviceData)
          })
        },
        initDeviceBar(val){
          var chartDom1 = this.$refs.testChar;
          if (chartDom1){
            var myChart1 = echarts.init(chartDom1);
            var option1;
            var dataAxis = ['压力水表', '烟感探测器', '液位水表'];
            var data = [val.yyTotal, val.ygTotal, val.ywTotal];
            var yMax = 500;
            var dataShadow = [];
            for (var i = 0; i < data.length; i++) {
              dataShadow.push(yMax);
            }
            option1 = {
              xAxis: {
                data: dataAxis,
                axisLabel: {
                  inside: true,
                  textStyle: {
                    color: '#fff'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                z: 10
              },
              yAxis: {
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  textStyle: {
                    color: '#999'
                  }
                }
              },
              dataZoom: [
                {
                  type: 'inside'
                }
              ],
              series: [
                {
                  type: 'bar',
                  showBackground: true,
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          {offset: 0, color: '#83bff6'},
                          {offset: 0.5, color: '#188df0'},
                          {offset: 1, color: '#188df0'}
                        ]
                    )
                  },
                  emphasis: {
                    itemStyle: {
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 0, 1,
                          [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                          ]
                      )
                    }
                  },
                  data: data
                }
              ]
            };
            option1 && myChart1.setOption(option1);
          }
        },
        initLineIFire(){
            getFireData({}).then(res=>{
                this.realFireNum = res.data.realFireNum
                var chartDom = this.$refs.errorChar;
                if (chartDom){
                    var myChart = echarts.init(chartDom);
                    var option;
                    option = {
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res.data.dataStr
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: res.data.fireNum,
                            type: 'line',
                            areaStyle: {}
                        }]
                    };
                    option && myChart.setOption(option);
                }
            })
        },
        //初始化webSock
        initWebSocket(){
            // const wsUri = "ws://192.168.20.76:9905/webSocket/"+sessionStorage.getItem('ucId');
            const wsUri = "wss://ifire.uchung.com/wss/webSocket/"+sessionStorage.getItem('ucId');
                this.websock = new WebSocket(wsUri);
            this.websock.onmessage = this.webSocketOnmessage;
            this.websock.onopen = this.webSocketOnOpen;
            this.websock.onerror = this.websocketOnError;
            this.websock.onclose = this.webSocketClose;
        },
        webSocketOnOpen(){ //连接建立之后执行send方法发送数据
            let actions = {"type":"online","ucId":sessionStorage.getItem('ucId')};
            this.webSocketSend(JSON.stringify(actions));
        },
        websocketOnError(){//连接建立失败重连
            this.initWebSocket();
        },
        webSocketOnmessage(e){ //b
            console.log("b")
            console.log(e.data)
            let obj = JSON.parse(e.data);
            console.log(obj)
            if (obj.type=='notice'){
                this.hasNotice=true
                this.noticeText = obj.message
            }
            if (obj.type=='joinChannel'){
                this.$notify.success({
                    title: '接入成功',
                    message: "当前有新视频进入"
                })
                this.remoteList = []
                this.joinChannel(obj)

                this.userId = obj.channel.substring(5)

                console.log(this.userId)
                //查询当前人的位置
                getInUserPlaceVo({userId:this.userId}).then(res=>{
                    console.log("getInUserPlaceVo")
                    console.log(res)
                    this.location = res.data.location
                })
            }
        },
        webSocketSend(Data){//数据发送
            this.websock.send(Data);
        },
        webSocketClose(e){  //关闭
            console.log('断开连接',e);
        },
        //校验当前设备是否支持
        isSupport(val,debug,channel){
            let option = {}
            let _this = this;
            if (debug){
                option.isDebug=true
            }
            val.isSupport(option).then((res)=>{
                this.onJoinEvent(val)
                this.onPublisher(val)
                this.onBye(val)
                this.onLeave(val)
                this.OnRefresh(val)
                this.startPreview(val)
                this.hasVideo = true;
                joinChannel({displayName:"消防队",channelId:channel.channel.substring(5),admin:false}).then(res=>{
                    console.log("joinChannel")
                    console.log(res.data)
                    _this.aliWebrtc.joinChannel(res.data,"消防队").then(obj=>{
                        _this.$nextTick(() => {
                            _this.publish(_this.aliWebrtc)
                            _this.startPreview(_this.aliWebrtc)
                        });
                        console.log("加入频道成功")
                    }).catch((error)=>{
                        console.log("加入频道失败",error)
                    })
                }).catch(error=>{
                    console.log("加入频道失败",error)
                })
            }).catch((error)=>{
                console.log("加入频道失败",error)
                this.$notify.error({
                    title: '成功',
                    message: "当前设备不支持webrtc"
                })
            })
        },
        //开启本地预览模式
        startPreview(val){
            val.startPreview(this.$refs.localVideo).then(()=>{
                console.log("本地预览")
            }).catch((error) => {
                console.log("预览失败",error)
            });
        },
        //推发布流
        publish(val){
            val.configLocalAudioPublish = true;
            val.configLocalCameraPublish = true;
            val.publish().then(()=>{
                console.log("发布流成功")
            } ,(error)=>{
                console.log("发布流失败",error);
            });
        },
        //加入视频通话
        joinChannel(val){
            this.aliWebrtc = new AliRtcEngine();
            this.isSupport(this.aliWebrtc,true,val)
        },
        // remote用户加入房间 onJoin
        onJoinEvent(val){
            val.on("onJoin", (publisher) => {
                console.log(publisher)
                val.configRemoteAudio(publisher.userId, true);
                val.configRemoteCameraTrack(publisher.userId, true, true);
                // showAlert(publisher.displayName + "加入房间","success");
                console.log(publisher.displayName + "加入房间");
            });
        },
        //remote流发布事件 onPublish
        onPublisher(val){
            val.on("onPublisher", (publisher) => {
                val.subscribe(publisher.userId).then((userId)=>{
                    console.log("userId")
                    console.log(userId)
                    console.log(this.remoteList)
                    console.log(this.$refs["remoteVideo"+(this.remoteList.length-1)])
                    this.$nextTick(() => {
                        val.setDisplayRemoteVideo(userId,this.$refs["remoteVideo"+(this.remoteList.length-1)],1)
                    });
                },(error)=>{
                    console.log(error.message);
                });
                let index = this.remoteList.indexOf(publisher);
                console.log(index)
                if (index === -1&&this.remoteList.length<8) {
                    //新增
                    this.remoteList.push(publisher)

                }
            });
        },
        //remote流结束发布事件 onUnPublisher
        onUnPublisher(val){
            val.on("onUnPublisher", (publisher) => {
                console.log("onUnPublisher",publisher);
                let index = this.remoteList.findIndex(function(item) {
                    return item.userId === publisher.userId;
                });
                console.log("index")
                console.log(index)
                this.remoteList.splice(index,1)
                if (this.remoteList.length<1){
                    this.leaveVideo()
                }
            });
        },
        // 被服务器踢出或者频道关闭时回调 onBye
        onBye(val){
            val.on("onBye",(message) =>{
                var msg;
                switch (message.code) {
                    case 1:
                        msg = "被服务器踢出";
                        break;
                    case 2:
                        msg = "频道关闭";
                        break;
                    case 3:
                        msg = "同一个ID在其他端登录,被服务器踢出";
                        break;
                    default:
                        msg = "onBye";
                }
                this.remoteList = []
            });
        },
        leaveVideo(){
            this.remoteList =[]
            this.aliWebrtc.leaveChannel();
            this.aliWebrtc.dispose();
            this.hasVideo = false;
        },
        /**
         * 检测到用户离开频道
         * 更新用户列表
         * 移除用户视图
         */
        onLeave(val){
            val.on("onLeave", (publisher) => {
                console.log(publisher);
                let index = this.remoteList.findIndex(function(item) {
                    return item.userId === publisher.userId;
                });
                console.log(index)
                this.remoteList.splice(index,1)
                if (this.remoteList.length<1){
                    this.leaveVideo()
                }
            })
        },
        //页面刷新时调用
        OnRefresh(val){
            window.onbeforeunload=function (e) {
                if (!val){
                    console.log("isSupport失败");
                    return ;
                }
                val.leaveChannel();
                val.dispose();
            }
        },
        beforeunloadHandler(){
            this.beforeUnloadTime=new Date().getTime();
        },
        unloadHandler(e){
            this.gapTime=new Date().getTime()-this.beforeUnloadTime;
            //判断是窗口关闭还是刷新
            if(this.gapTime<=5){//浏览器关闭
                //自己的操作行为
                let  actions = {"type":"offline","ucId":sessionStorage.getItem('ucId')};
                this.webSocketSend(JSON.stringify(actions));
                this.webSock.close() //离开路由之后断开websocket连接
            }
        },
        showVideoUser(){
            showVideoUser({customize:this.userId}).then(res=>{
                this.userList = res.data
            })
        },
        pullVideo(){
            this.videoForm.channelId = this.userId
            pullPerson(this.videoForm).then(res=>{
                console.log(res)
                this.videoForm = {}
                this.pullVideoStatus = false
            })
        },
        deleteChannel(){
            this.deleteForm.channelId = this.userId
            deleteChannel(this.deleteForm).then(res=>{
                console.log(res)
                this.deleteForm.channelId = {}
                this.resizeBox = false
                // this.unPublish(this.aliWebrtc)
                // this.stopPreview(this.aliWebrtc)
            })
        },
        unPublish(val){
            val.unPublish().then(()=>{
                console.log("结束流成功")
            } ,(error)=>{
                console.log("结束流失败",error);
            });
        },
        stopPreview(val){
            val.stopPreview().then(()=>{
                console.log("结束预览成功")
            }).catch((error) => {
                console.log("结束预览失败")
                // 结束预览失败
            });
        }


    },
    destroyed() {
        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.removeEventListener('unload', e => this.unloadHandler(e))
    },

}
</script>

<style lang="scss" scoped>
    #test{
        width:440px;
        height:calc(33vh - 93px)
    }
    #error{
        width:440px;
        height:calc(27vh - 81px);
    }
    .bg-main{
        height: 100vh;
        width: 100%;

    }
    .bm-view {
        width: 100%;
        height: 100vh;
        background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0.4) 10%, rgba(167, 166, 166, 0.6) 90%, rgba(150, 148, 148, 0.8) 95%, rgb(175, 173, 173) 100%);
    }
    .bg-left{
        position: absolute;
        left: 0;
        height: 100vh;
        width: 460px;
        background-image: url("../../assets/bg-left.png");
        background-size: 95% 100vh;
        background-repeat: no-repeat;
        z-index: 11;
    }
    .bg-right{
        position: absolute;
        right: 0;
        height: 100vh;
        width: 460px;
        background-image: url("../../assets/bg-right.png");
        background-size: 100% 100vh;
        background-repeat: no-repeat;
        z-index: 11;
    }
    .bg-top{
        position: absolute;
        top: 0;
        width: 100%;
        height: 90px;
        background-image: url("../../assets/top.png");
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: 12;
    }
    .video-button{
        width: 178px;height:36px;background-image:url('../../assets/video-button.png');
        background-size: 100%;
        float: left;
        background-repeat: no-repeat;
    }
    .video-button:active{
        width: 178px;
        height:36px;
        background-image:url('../../assets/video-button-active.png');
        background-size: 100%;
        float: left;
        background-repeat: no-repeat;
    }
    .notice-button{
        float: left;
        font-size: 30px;
        color: #fff;
        margin-left: 20px;
        line-height: 36px;
    }
    .left-content{
        margin-top: 55px;
        padding: 20px 0 20px 20px;
        color: #fff;
    }
    .right-content{
        margin-top: 55px;
        padding: 20px 20px 20px 0;
        color: #fff;
    }
    .data-top{
        width: 440px;
        height: 75px;
        background-image:url('../../assets/data_bg.png');
        background-size: 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        //下方区域的布局
        .content-box {
            display: grid;
            grid-template-columns: 3fr 3fr 3fr;
        }
    }
    .data-bottom{
        width: 440px;
        margin-top: 20px;
        height: calc(100vh - 190px);
        display: flex;
        flex-direction: row;
        .title{
            width: 166px;
            height: 25px;
            background-image:url('../../assets/title_bg.png');
            background-size: 100%;
            background-repeat: no-repeat;
            font-size: 16px;
            font-weight: bold;
            .font{
                margin-left: 35px;
                background-image:-webkit-linear-gradient(bottom,#bee2ee,#fff);
                -webkit-background-clip:text;
                -webkit-text-fill-color:transparent;
            }
        }
        .bottom-box-left{
            display: grid;
            grid-template-rows :3fr 3fr 3fr;
        }
        .bottom-box-right{
            display: grid;
            grid-template-rows :3fr 5fr 3fr;
        }
    }
    .equ-bottom{
        width: 440px;
        height:calc(33vh - 93px);
        background-image:url('../../assets/euq-bg.png');
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: left bottom;
        .text{
            padding-left: 40px;
            height:calc(33vh - 93px);
            display: flex;
            flex-direction: row;
            //下方区域的布局
            .equ-name {
                width: 60%;
                display: grid;
                grid-template-rows: 4fr 3fr 3fr 3fr;
            }
        }
    }
    .el-dialog .videoBox{
        background: rgba(255,255,255,0.5);

        .video-content{
            text-align: center;
            height: calc(45vh - 60px);
            padding: 10px
        }
    }
    .fireAddress{
        position:absolute;
        top:8.6vh;
        left:80%;
        width: 18%;
        height: 11vh;
        z-index: 12;
        padding-top: 25px;
        padding-left:15px ;
        font-size:16px ;

        box-sizing: border-box;
        border-radius:10px;
        background-color: #fff;

        animation: shake 1s infinite;
    }
    .fireNotice{
        position:absolute;
        top:25vh;
        left:80%;
        width: 18%;
        height: 11vh;
        z-index: 12;
        padding-top: 25px;
        padding-left:15px ;
        font-size:16px ;

        box-sizing: border-box;
        border-radius:10px;
        background-color: #fff;

        animation: shake 1s infinite;
    }
    @keyframes shake { /* 水平抖动，核心代码 */
        10%, 90% { transform: translate3d(-1px, 0, 0); }
        20%, 80% { transform: translate3d(+2px, 0, 0); }
        30%, 70% { transform: translate3d(-4px, 0, 0); }
        40%, 60% { transform: translate3d(+4px, 0, 0); }
        50% { transform: translate3d(-4px, 0, 0); }
    }
    @keyframes mymove {
        50% {top: 300px;}
    }
</style>